<template>
	<gui-page ref="guipage">
		<view slot="gBody" class="content" style="">

			<!-- <view class="" style="mix-blend-mode: luminosity;position: absolute;bottom: 0;width: 100%;"> -->
			<!-- <image src="https://img.js.design/assets/img/63314412a6d6d1e44a9235b3.png" mode="widthFix"></image> -->
			<!-- <view>
				<image src="../../static/boya_bg.png" mode="widthFix" style="width: 100%;height: 100%;position: absolute;"></image>
			</view> -->
			<!-- </view> -->

			<view class="heard gui-padding gui-color-white po-re"
				style="margin-top: 30rpx;height: 160rpx;width: 80%;padding-top: 60rpx;">
				<text class="gui-h2" style="margin-top: 40rpx;">集团公司领导信箱</text>
				<view class="" style="margin-top: 10rpx;">
					<text style="font-size: 20rpx;">LIUZHOU STEEL GROUP LEADER'S MAILBOX</text>
				</view>
			</view>

			<view class="gui-color-white po-re" style="display: flex;text-align: center;margin-top: 40rpx;"
				v-if="!is_detail">
				<view @tap="change_index(0)" :class="this_index == 0 ? 'this_bg gui-h3' : 'defu_bg gui-h3'"
					style="width: 33%;height: 80rpx;line-height: 80rpx;">
					<text>我要写信</text>
				</view>
				<view @tap="change_index(1)" :class="this_index == 1 ? 'this_bg gui-h3' : 'defu_bg gui-h3'"
					style="width: 33%;height: 80rpx;line-height: 80rpx;">
					<text>等待审核</text>
				</view>
				<view @tap="change_index(2)" :class="this_index == 2 ? 'this_bg gui-h3' : 'defu_bg gui-h3'"
					style="width: 33%;height: 80rpx;line-height: 80rpx;">
					<text>我的信件</text>
				</view>
			</view>

			<view v-if="this_index == 0 && is_detail == 0" class="po-re">
				<view class="gui-bg-white" style="width: 75%;margin: 40rpx auto 0 auto;">
					<view class="" style="padding-top: 20rpx;">
						<radio-group @change="radioChange" style="display: flex;">
							<label class="" v-for="(item, index) in items" :key="item.value"
								style="margin-left: 30rpx;">
								<radio :value="item.value" :checked="index === current" />
								<text>{{item.name}}</text>
							</label>
						</radio-group>
					</view>

					<view class="gui-margin-top" style="width: 80%;margin: 20rpx auto 0 auto;">
						<textarea v-model="content" name="" id="" placeholder="请输入内容"
							style="background-color: #e7e7e7;width: 96%;border-radius: 20rpx;height: 200rpx;padding: 2%;"></textarea>
					</view>

					<view class="gui-margin-top" style="width: 80%;margin: 20rpx auto 0 auto;">
						<text class="gui-h4">上传图片</text>

						<view class="" style="display: flex;">
							<view v-for="(item,index) in imgs" class="gui-h1 gui-margin-top"
								style="width: 100rpx;height: 100rpx;border-radius: 20rpx;" :key="index">
								<image @tap="show_img(item)" :src="item" mode=""></image>
							</view>

							<view @tap="upload_img" class="gui-h1 gui-margin-top gui-color-gray"
								style="width: 100rpx;height: 100rpx;background-color: #e7e7e7;text-align: center;border-radius: 20rpx;">
								<text style="line-height: 100rpx;">+</text>
							</view>
						</view>

					</view>

					<view @tap="add_mail" class="gui-bg-blue gui-color-white gui-h4"
						style="width: 120rpx;height: 60rpx;text-align: center;border-radius: 20rpx;margin: 30rpx auto 0 auto;">
						<text style="line-height: 60rpx;">寄出</text>
					</view>
				</view>

				<view class="gui-flex gui-align-items-center gui-justify-content-center" style="width: 100%;">
					<image
						src="http://boyaltd.oss-cn-hangzhou.aliyuncs.com/2022-09/27/X2865phpnOMonj1664269573220927.png"
						mode="widthFix"></image>
				</view>
			</view>

			<view v-if="this_index == 1 && is_detail == 0" class="po-re">
				<view v-for="(item,index) in mail_list" @tap="to_detail(item.id)" class="gui-flex" style=""
					:key="index">
					<image
						src="http://boyaltd.oss-cn-hangzhou.aliyuncs.com/2022-09/28/iZI33phps5QW2p1664356528220928.png"
						mode="scaleToFill" style="width: 140rpx;height: 140rpx;"></image>
					<view class="gui-bg-white"
						style="height: 120rpx;width: 70%;margin-left: 20rpx;border-radius: 20rpx;padding-left: 20rpx;margin-top: 20rpx;">
						<view class=""
							style="margin-top: 20rpx;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
							<text>{{item.title}} : {{item.content}}</text>
						</view>
						<view class="gui-color-red" style="margin-top: 10rpx;">
							<text @click="gotoAudit(item)">当前环节 :
								{{item.this_process ? item.this_process.approver_name : '无审批'}}</text>
						</view>
					</view>
				</view>
				<!-- real_login -->

				<view v-if="no_more" class="gui-text-center gui-color-white">
					<text>无更多内容</text>
				</view>
			</view>

			<view v-if="this_index == 2 && is_detail == 0" class="po-re">

				<view style="width: 60%;margin: 20rpx auto;">
					<button @tap="to_admin" v-if="is_sh" type="default"
						class="gui-bg-green gui-color-white">审核信件</button>
				</view>
				<view @tap="to_detail(item.id)" v-for="(item,index) in mail_list" class="gui-flex" style=""
					:key="index">
					<image
						src="http://boyaltd.oss-cn-hangzhou.aliyuncs.com/2022-09/28/iZI33phps5QW2p1664356528220928.png"
						mode="scaleToFill" style="width: 140rpx;height: 140rpx;"></image>
					<view class="gui-bg-white"
						style="height: 120rpx;width: 70%;margin-left: 20rpx;border-radius: 20rpx;padding-left: 20rpx;margin-top: 20rpx;">
						<view class=""
							style="margin-top: 20rpx;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
							<text>{{item.title}} : {{item.content}}</text>
						</view>
						<view
							:class="item.status == 0 ? 'gui-color-red' : item.status == 1 ? 'gui-color-blue' : item.status == 2 ? 'gui-color-green' : ''"
							style="margin-top: 10rpx;text-align: right;padding-right: 20rpx;">
							<text>{{item.status == 0 ? '不通过' : item.status == 1 ? '等待审核完成' : item.status == 2 ? '已回复' : '未知'}}</text>
						</view>
					</view>
				</view>

				<view v-if="no_more" class="gui-text-center gui-color-white">
					<text>无更多内容</text>
				</view>
			</view>

			<view v-if="is_detail" class="po-re">
				<view class="gui-bg-white"
					style="width: 80%;margin: 40rpx auto 0 auto;border-radius: 40rpx;padding: 20rpx;word-wrap: break-word;overflow-y: scroll;">
					<view class="">
						<text>问题</text>
					</view>
					<text>{{show_data.content}}</text>
				</view>
				<view class="gui-bg-white"
					style="width: 80%;margin: 20rpx auto;border-radius: 40rpx;padding: 20rpx;word-wrap: break-word;">
					<view class="">
						<text>审批流 : </text>
					</view>
					<view
						:class="item.is_approver == '1' ? 'bor_r gui-margin-top gui-flex gui-padding' : 'gui-margin-top gui-flex'"
						v-for="(item,index) in show_data.process" :key="index">
						<text style="width: 80%;">{{item.approver_name}} : {{item.approver_opinion}}</text>
						<view style="width: 20%;text-align: right;">
							<text class="gui-color-red">{{item.approver_status == "1" ? "已审核" : "待审"}}</text>
						</view>
					</view>
				</view>
				<view class="gui-bg-white"
					style="width: 80%;height: 200rpx;margin: 20rpx auto 0 auto;border-radius: 40rpx;padding: 20rpx;word-wrap: break-word;overflow-y: scroll;">
					<view class="">
						<text>回复 : </text>
					</view>
					<text>{{show_data.status == '2' ? show_data.reply : ""}}</text>
				</view>
				<view class="gui-bg-white"
					style="width: 80%;height: 200rpx;margin: 20rpx auto 0 auto;border-radius: 40rpx;padding: 20rpx;word-wrap: break-word;">
					<view class="">
						<text>回复 : </text>
					</view>
					<textarea placeholder="请输入回复的内容" class="gui-margin" style="overflow-y: scroll;"
						v-model="reply"></textarea>
				</view>
				<view @tap="is_detail = 0" class="gui-bg-yellow gui-text-center"
					style="width: 400rpx;height: 60rpx;margin: 40rpx auto 0 auto;border-radius: 20rpx;">
					<!-- <text style="line-height: 60rpx;">返回列表</text> -->
					<!-- <button type="default" class="gui-bg-green">修改回复</button> -->
					<button type="primary" class="">修改回复</button>
				</view>
				<view @tap="is_detail = 0" class="gui-bg-yellow gui-text-center"
					style="width: 400rpx;height: 60rpx;margin: 40rpx auto 0 auto;border-radius: 20rpx;">
					<!-- <text style="line-height: 60rpx;">返回列表</text> -->
					<!-- <button type="default" class="gui-bg-green">修改回复</button> -->
					<button type="default" class="gui-bg-green">返回列表</button>
				</view>

				<view class="gui-padding">
					<view class="">
						<text>图片 : </text>
					</view>
					<view class="gui-flex">
						<view @tap="show_img(item)" v-for="(item,index) in show_data.imgs.split(',')" class=""
							style="width: 100rpx;height: 100rpx;border-radius: 20rpx;" :key="index">
							<image :src="item" mode=""></image>
						</view>
					</view>
				</view>
			</view>



			<!-- 遮盖层 -->
			<view class="">
				<gui-page-loading ref="guipageloading"></gui-page-loading>
			</view>
		</view>
	</gui-page>
</template>
<script>
	export default {
		data() {
			return {
				user: [],
				reply: '',
				this_index: 0,
				items: [{
					value: '提问',
					name: '我要提问',
					checked: 'true'
				}, {
					value: '建议',
					name: '我要建议',
				}, ],
				current: 0,
				content: '',
				imgs: [],
				mail_list: [],
				show_data: {
					'imgs': ''
				}, //单个详情
				is_sh: 0,
				is_detail: 0,
				pages: 0,
				no_more: false,
				id: 0,
			}
		},
		// destroyed(){
		// 	console.log('114455');
		// },
		onLoad: function(option) {
			this.user = uni.getStorageSync("user");
			console.log(this.user);
			this.id = option.id
			this.get_detail()
			// if(this.user.type == 9){
			// 	uni.reLaunch({
			// 		url:"../admin/index"
			// 	});
			// }
			console.log("option", option)
		},
		onReady() {
			// this.real_login();
		},
		methods: {

			get_mail_list(no_first) {
				//信件列表
				let self = this;
				let token = uni.getStorageSync("token");
				// self.grace.post(self.apiUrl+"/mailbox/get_mail_list",{pags:this.pages},function(res){
				self.$boya.Post("/api/mailbox/get_mail_list", {
					pages: this.pages,
					token: token
				}, function(res) {
					// self.$refs.guipageloading.close();
					console.log("mail_list", res)
					if (res.data.list.length == 0 || res.data.list.length < 10) {
						self.no_more = true;
					}
					if (res.code == 200) {
						if (no_first) {
							for (let i = 0; i < res.data.list.length; i++) {
								self.mail_list.push(res.data.list[i]);
							}
						} else {
							self.mail_list = res.data.list;
						}
						// self.mail_list = res.data.list;
						if (res.data.approver.length) {
							self.is_sh = 1;
						}
					} else {
						uni.showModal({
							title: '提示',
							content: res.data
						});
					}
				});
			},
			get_detail(id) {
				//详情
				let self = this;
				// this.$boya.post
				// this.grace.post(self.apiUrl+"/mailbox/get_detail",{id:id},function(res){
				this.$boya.Post("/api/mailbox/get_detail", {
					id: self.id
				}, function(res) {
					// self.$refs.guipageloading.close();
					console.log("res", res)
					if (res.code == 200) {
						self.is_detail = 1;
						self.show_data = res.data;
						console.log("res.data.process", res.data.process)
					} else {
						uni.showModal({
							title: '提示',
							content: res.data
						});
					}
				});
			},
			to_admin() {
				uni.navigateTo({
					url: "./mail_admin"
				});
			},
			to_detail(id) {
				// uni.navigateTo({
				// 	url:'../process/process_detail?id=' + id
				// });
				this.get_detail(id);
			},
			add_mail() {
				//添加信件
				let self = this;
				// self.grace.post(self.apiUrl+"/mailbox/add_mail",{content:this.content,type:this.items[this.current].value,imgs:this.imgs},function(res){
				this.$boya.Post("/api/mailbox/add_mail", {
					content: self.content,
					type: self.items[self.current].value,
					imgs: self.imgs
				}, function(res) {
					console.log(res, 'create');
					if (res.code == 200) {
						uni.showModal({
							title: '提示',
							content: '寄出成功',
							success() {
								self.this_index = 1;
								self.get_mail_list();
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: res.data
						});
					}
				});
			},
			upload_img(item, index) {
				let self = this;
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: self.apiUrl + "/public/upload_aliyun_oss",
							filePath: tempFilePaths[0],
							name: 'file',
							// formData:{
							// },
							success: (up_res) => {
								self.$refs.guipageloading.close();
								let upload_res = JSON.parse(up_res.data);
								if (upload_res.code == 200) {
									uni.showToast({
										title: '上传成功',
										icon: 'none'
									});
									self.imgs.push(upload_res.data.url);
								} else {
									uni.showModal({
										title: '提示',
										content: '上传失败'
									});
								}
								console.log(upload_res, 'up_res');
							}
						});
					}
				});
			},
			show_img(url) {
				uni.previewImage({
					urls: [url],
					index: 0
				});
			},
			change_index(index) {
				this.this_index = index;
				this.is_detail = 0;
				this.get_mail_list();
				console.log(index)
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			gotoAudit(d) {
				// uni.navigateTo({
				// 	url:"./sh_detail?id="+d.id
				// })
				// console.log(d.id)_fail 
				this.is_detail = 1
			}

		}
	}
</script>

<style>
	page {
		height: 100%;
		width: 100%;
		/* background: url('http://boyaltd.oss-cn-hangzhou.aliyuncs.com/2022-09/29/dRcmwphpxVffZM1664446616220929.png') 100% no-repeat; */
		background-image: url("http://boyaltd.oss-cn-hangzhou.aliyuncs.com/2022-09/29/dRcmwphpxVffZM1664446616220929.png");
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: rgb(208, 223, 236);
		/* background: linear-gradient(0deg, rgba(237, 250, 250, 1) 0%, rgba(3, 29, 135, 1) 100%); */

	}

	.heard {
		background: url('https://img.js.design/assets/img/6332548debef9722cf5b62f9.png');
		background-size: 200rpx;
		background-repeat: no-repeat;
		background-position: right;
	}

	.this_bg {
		background-color: rgba(255, 141, 26, 1);
	}

	.defu_bg {
		background-color: rgba(29, 53, 148, 1);
	}

	.po-re {
		position: relative;
	}
</style>
<style scoped>

</style>